import { Navigate, useRoutes } from 'react-router-dom'
import { lazy, Suspense } from 'react'
const Login=lazy(()=>import('../pages/Login'))
const Main=lazy(()=>import('../pages/Main'))
const Home=lazy(()=>import('../pages/Main/Home'))
const About=lazy(()=>import('../pages/Main/About'))
const List=lazy(()=>import('../components/List'))
const NotFound=lazy(()=>import('../components/404'))
const Loading=lazy(()=>import('../components/Loading'))
const load = (Comp) => {
    return (
        <Suspense fallback={<Loading />}>
            <Comp />
        </Suspense>
    )
}
const routes = [
    {
        path: '/login',
        element: load(Login)
    },
    {
        path: '/main',
        element: load(Main),
        children: [
            {
                path: "/main/about",
                element: load(About),
            },
            {
                path: "/main/home",
                element: load(Home),
                children: [
                    {
                        path: "/main/home/music/:id",
                        element: load(List),
                    },
                    {
                        path: "/main/home/news/:id",
                        element: load(List),
                    }
                ]
            },
        ]
    },
    {
        path: '/',
        element: <Navigate to='/login' />
    },
    {
        path: '*',
        element: load(NotFound),
    }
]

export const GetRoutes = () => {
    return useRoutes(routes)
}

export const useMyRoutes = () => {
    return useRoutes(routes)
}